<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="<%=basePath%>jslib/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>jslib/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>jslib/easyui/demo/demo.css">
<script type="text/javascript" src="<%=basePath%>jslib//easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>jslib/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>jslib/easyui/locale/easyui-lang-zh_CN.js"></script>

<title>Tab Position - jQuery EasyUI Demo(1.5.3)</title>

<script type="text/javascript">
		
	$(function(){
		
	});
	
</script>
</head>
<body>

	<h2>选项卡位置</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>点击“位置”下拉框选择一个项改变选项卡的位置.</div>
	</div>
	<div style="margin:10px 0;">
		<span>位置:</span>
		<select onchange="$('#tt').tabs({tabPosition:this.value})">
			<option value="top">上</option>
			<option value="bottom">下</option>
			<option value="left">左</option>
			<option value="right">右</option>
		</select>
	</div>
	<div id="tt" class="easyui-tabs" style="width:700px;height:250px">
		<div title="关于" style="padding:10px">
			<p style="font-size:14px">jQuery EasyUI框架能够让你轻松构建Web页面.</p>
			<ul>
				<li>easyui是一套基于JQuery的用户界面插件集合.</li>
				<li>easyui为构建现代流行的交互式体验JavaScript应用程序提供了基本功能.</li>
				<li>使用easyui你不需要写很多javascript代码，你通常只需要写一些html标签来定义用户界面.</li>
				<li>完美支持HTML5.</li>
				<li>easyui能够有效地节省你的开发时间.</li>
				<li>easyui很简单但是很强大.</li>
			</ul>
		</div>
		<div title="我的文档" style="padding:10px">
			<ul class="easyui-tree" data-options="url:'../tabs/tree_data1.json',animate:true"></ul>
		</div>
		<div title="帮助" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
			这是帮助内容.
		</div>
	</div>

	<script type="text/javascript">
	
	</script>
</body>
</html>